<template>
  <div>
    <!-- 导航栏占位符 -->
    <div class="navbar-placeholder"></div>
    <!-- 导航栏 -->
    <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand">
          <img src="@/assets/logo.png" alt="Logo" width="230" height="50" class="d-inline-block align-text-top">
        </a>
        <!-- 缩小之后的导航栏按钮 -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item" :class="{ active: $route.path === computedPaths.aboutUs }">
              <router-link :to="computedPaths.aboutUs" class="nav-link">{{ t('navbar.aboutUs') }}</router-link>
            </li>
            <li class="nav-item" :class="{ active: $route.path === computedPaths.entrepreneurshipService }">
              <router-link :to="computedPaths.entrepreneurshipService" class="nav-link">{{ t('navbar.entrepreneurshipService') }}</router-link>
            </li>
            <li class="nav-item" :class="{ active: $route.path === computedPaths.globalBases }">
              <router-link :to="computedPaths.globalBases" class="nav-link">{{ t('navbar.globalBases') }}</router-link>
            </li>
            <li class="nav-item" :class="{ active: $route.path === computedPaths.industryThinkTank }">
              <router-link :to="computedPaths.industryThinkTank" class="nav-link">{{ t('navbar.industryThinkTank') }}</router-link>
            </li>
            <li class="nav-item dropdown" :class="{ active: $route.path.includes('/investor') || $route.path.includes('/medical') || $route.path.includes('/organizations') || $route.path.includes('/government') || $route.path.includes('/service') }">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                {{ t('navbar.ecologicalResources') }}
              </a>
              <ul class="dropdown-menu">
                <li><router-link :to="computedPaths.investor" class="dropdown-item" :class="{ active: $route.path === '/investor' || $route.path === '/investor/islogin' }">{{ t('navbar.investor') }}</router-link></li>
                <li><router-link :to="computedPaths.medical" class="dropdown-item" :class="{ active: $route.path === '/medical' || $route.path === '/medical/islogin'}">{{ t('navbar.medical') }}</router-link></li>
                <li><router-link :to="computedPaths.organizations" class="dropdown-item" :class="{ active: $route.path === '/organizations'|| $route.path === '/organizations/islogin'}">{{ t('navbar.organizations') }}</router-link></li>
                <li><router-link :to="computedPaths.government" class="dropdown-item" :class="{ active: $route.path === '/government'|| $route.path === '/government/islogin' }">{{ t('navbar.government') }}</router-link></li>
                <li><router-link :to="computedPaths.service" class="dropdown-item" :class="{ active: $route.path === '/service'|| $route.path === '/service/islogin' }">{{ t('navbar.serviceProviders') }}</router-link></li>
              </ul>
            </li>
            <li class="nav-item" :class="{ active: $route.path === computedPaths.contactUs }">
              <router-link :to="computedPaths.contactUs" class="nav-link">{{ t('navbar.contactUs') }}</router-link>
            </li>
          </ul>
          <div class="navbar-text">
            <a
                :class="{ 'active-lang': currentLanguage === 'zh' }"
                @click="showModal('zh')"
            >
              中
            </a>
            <i>&thinsp;/&thinsp;</i>
            <a
                :class="{ 'active-lang': currentLanguage === 'en' }"
                @click="showModal('en')"
            >
              EN
            </a>
          </div>
          <div class="navbar-divider"></div>
          <button class="navbar-login-button" @click="navigateToLogin">{{ loginButtonText }}</button>
        </div>
      </div>
    </nav>
    <!-- 切换语言确认模态框 -->
    <a-modal
        v-model:visible="isModalVisible"
        :title="modalTitle"
        @ok="handleOk"
        @cancel="handleCancel"
        :ok-text="modalOkText"
        :cancel-text="modalCancelText"
    >
      <p>{{ modalContent }}</p>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

const { t, locale } = useI18n();
const currentLanguage = ref(locale.value);
const route = useRoute();

const loginButtonText = computed(() => {
  return route.path.includes('/islogin') ? t('navbar.loginRegister1') : t('navbar.loginRegister');
});

const computedPaths = computed(() => {
  const isLogin = loginButtonText.value === t('navbar.loginRegister1');
  return {
    globalBases: isLogin ? '/GlobalBasesView/islogin' : '/GlobalBasesView',
    aboutUs: isLogin ? '/AboutUsView/islogin' : '/AboutUsView',
    entrepreneurshipService: isLogin ? '/EntrepreneurshipServiceView/islogin' : '/EntrepreneurshipServiceView',
    industryThinkTank: isLogin ? '/IndustryThinkTankView/islogin' : '/IndustryThinkTankView',
    investor: isLogin ? '/investor/islogin' : '/investor',
    medical: isLogin ? '/medical/islogin' : '/medical',
    organizations: isLogin ? '/organizations/islogin' : '/organizations',
    government: isLogin ? '/government/islogin' : '/government',
    service: isLogin ? '/service/islogin' : '/service',
    contactUs: isLogin ? '/contactus/islogin' : '/contactus'
  };
});

const isModalVisible = ref(false);
const selectedLanguage = ref('');
const modalTitle = ref('');
const modalContent = ref('');
const modalOkText = ref('');
const modalCancelText = ref('');

function showModal(language) {
  selectedLanguage.value = language;
  if (language === 'en') {
    modalTitle.value = '确定切换语言吗？';
    modalContent.value = '您确定要切换到英文吗？';
    modalOkText.value = '确定';
    modalCancelText.value = '取消';
  } else if (language === 'zh') {
    modalTitle.value = 'Are you sure you want to change the language?';
    modalContent.value = 'Are you sure you want to switch to Chinese?';
    modalOkText.value = 'Yes';
    modalCancelText.value = 'No';
  }
  isModalVisible.value = true;
}

function handleOk() {
  changeLanguage(selectedLanguage.value);
  isModalVisible.value = false;
}

function handleCancel() {
  isModalVisible.value = false;
}

function changeLanguage(lang) {
  locale.value = lang;
  currentLanguage.value = lang;
  adjustNavLinkMargin(lang);
}

function adjustNavLinkMargin(lang) {
  const navLinks = document.querySelectorAll('.nav-item .nav-link');
  navLinks.forEach(link => {
    link.style.marginRight = lang === 'en' ? '5px' : '25px';
  });
}

function navigateToLogin() {
  window.location.href = 'https://cschain.cn/test/index/';
}

// 滚动隐藏导航栏逻辑
let lastScrollTop = 0;
const navbar = ref(null);
let isScrollingUp = false;
let scrollTimeout = null;

onMounted(() => {
  navbar.value = document.getElementById('navbar');
  window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});

function handleScroll() {
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;

  // 判断滚动方向
  if (currentScroll > lastScrollTop) {
    isScrollingUp = false; // 向下滚动
    navbar.value.style.transform = 'translateY(-100%)'; // 隐藏导航栏
  } else {
    isScrollingUp = true; // 向上滚动
    navbar.value.style.transform = 'translateY(0)'; // 显示导航栏
  }
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;

  // 清除之前的计时器
  clearTimeout(scrollTimeout);
  // 设置新的计时器，在用户停止滚动500ms后自动隐藏导航栏
  scrollTimeout = setTimeout(() => {
    if (!isScrollingUp) {
      navbar.value.style.transform = 'translateY(-100%)'; // 隐藏导航栏
    }
  }, 500);
}

</script>

<style scoped>
.navbar {
  background-color: #ffffff;
  position: fixed; /* 使用 fixed 让导航栏固定在页面顶部 */
  top: 0;
  width: 100%;
  transition: transform 0.7s;
  z-index: 1000;
}

.navbar-placeholder {
  height: 60px; /* 导航栏的高度 */
}

.navbar-text {
  margin-right: 1%;
}

.navbar-text a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}

.navbar-text a.active-lang {
  color: #4ba2dd;
}

.navbar-login-button {
  margin-left: 15px;
  background-color: #4ba2dd;
  border: none;
  color: #ffffff;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.navbar-brand {
  margin-left: 40px;
  margin-right: 50px;
}

.nav-item .nav-link {
  padding: 7px;
  transition: background-color 0.3s, color 0.3s;
  margin-right: 25px;
  font-size: 18px;
  color: #000000;
  font-weight: 300;
}

.nav-item .nav-link:hover {
  background-color: #ededed;
}

.nav-item.active .nav-link,
.nav-item .nav-link.active {
  background-color: #e6f4ff;
  color: #76c0ff;
}

.nav-item.dropdown .dropdown-menu .dropdown-item {
  transition: background-color 0.3s, color 0.3s;
  font-weight: 300;
}

.nav-item.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: #ededed;
}

.nav-item.dropdown .dropdown-menu .dropdown-item.active {
  background-color: #e6f4ff;
  color: #76c0ff;
}

.navbar-divider {
  width: 0.1vw;
  height: 1.2vw;
  background-color: black;
}

@media (max-width: 767px) {
  .navbar-brand {
    margin-left: 0;
    margin-right: 0;
  }

  .navbar-toggler {
    margin-top: 1%;
  }

  .navbar-toggler-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-item {
    text-align: center;
  }

  .nav-item .nav-link {
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .navbar-text a {
    margin-right: 10px;
    margin-left: 10px;
  }

  .navbar-collapse {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar-divider {
    display: none;
  }
}
</style>
